<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <p>{{count}}</p>
            <p>{{doubleCount}}</p>
            <p>
                <button @click="count++">count++</button>
                 <button @click="doubleCount+=2">doubleCount+=2</button>
            </p>
        </div>
    </div>
</body>
<script>
    // methods 用于存放方法 
    // 1. 每次对应名称调用函数,函数都会执行一次 (在一个视图中,如果同一个方法多次使用->调用多次)
    // 2. 数据更新之后, 为了对比数据更细前后虚拟DOM的变化 => 函数还要在执行一次

    // computed 计算属性 (派生值 衍生值)
    // computed 计算属性 => 是根据data中绑定的数据(一个或多个)得到的一个新数据(派生值 衍生值),计算属性可以依赖data中的一个或多个数据, 并在data绑定完毕之后默认执行一次对应的函数,将函数的执行结果作为计算属性的属性值,并缓存计算的结果,当该计算属性依赖的数据(data中绑定的)发生改变值,绑定的函数才会重新执行,并缓存新的结果
    // 注意:  不建议在计算属性中使用异步代码 (不能执行异步操作)

    // 简单小结: 根据原本的数据得到新数据, 新数据依赖原本的数据, 如果被依赖的数据发生改变, 新数据也会改变,并缓存计算的结果


    // 你(公司的老板) <= 员工A + 员工B  + 员工C  + 员工D

    // 小计(total 新) = 商品价格(price) * 商品数量(num)
    //                        99               1    
    //                        120-10
    //                                         2

    var vm = new Vue({
        el: "#app",
        data: {
            count:1,
        },
        methods: {
           
        },
        computed:{  // computed 计算属性 
            // 键名: 计算属性的属性名 (如果需要使用此计算属性 通过vue实例获取)
            // 键值: 依赖于函数的执行结果 (计算属性 绑定的函数会在data数据绑定完毕之后默认执行一次,并将函数的执行结果作为计算属性的值 => 函数中的this默认执行当前Vue实例)

            // 此写法给计算属性只绑定了一个函数  => 此函数默认是取值函数 doubleCount的值依赖于函数的执行结果 (计算属性默认只能取值 getter)
            // doubleCount:function(){
            //     return this.count * 2;
            // }

            doubleCount:{
                // 对doubleCount取值时执行的函数
                get:function(){
                    console.log("取值拦截");
                    return this.count * 2;
                },
                // 对doubleCount赋值时执行的函数   this.doubleCount=xxx
                set:function(val){
                    console.log("赋值拦截",val);
                    this.count = val / 2;
                }
            }
        }
    });





</script>

</html>